<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>flex Layout demo</title>
		<style type="text/css">
			html,
			body {
				display: flex;
				flex-direction: column;
				height: 100%;
			}
			.mainBorder {
				border: 1px solid #ccc;
				margin: 2px 0px;
			}
			
			.innerBorder {
				border: 1px solid #ccc;
				margin: 2px;
			}
			
			header {
				order: 0;
				height: 80px;
			}
			
			section {
				order: 1;
				flex-grow: 1;
				display: flex;
				flex-direction: row;
			}
			
			footer {
				order: 2;
				height: 50px;
			}
			
			nav {
				width: 180px;
			}
			
			article {
				width: 100%
			}
		</style>
	</head>

	<body>
		<header class="mainBorder">logo</header>
		<section>
			<nav class="innerBorder">菜单</nav>
			<article class="innerBorder">主体</article>
		</section>
		<footer class="mainBorder">结尾</footer>
	</body>

</html>